import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: XJHomePage(),
    );
  }
}

class XJHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("商品列表"),
      ),
      body: XJHomeContent(),
    );
  }
}

class XJHomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        XJHomeProductItem("Apple1", "Macbook1",
            "http://img5.mtime.cn/mg/2020/01/16/151219.82587599_270X405X4.jpg"),
        XJHomeProductItem("Apple2", "Macbook2",
            "http://img5.mtime.cn/mt/2019/12/23/144335.29871179_175X262X4.jpg"),
        XJHomeProductItem("Apple3", "Macbook3",
            "http://img5.mtime.cn/mt/2019/12/27/182450.52538653_175X262X4.jpg"),
        XJHomeProductItem("Apple1", "Macbook1",
            "http://img5.mtime.cn/mg/2020/01/16/151219.82587599_270X405X4.jpg"),
        XJHomeProductItem("Apple2", "Macbook2",
            "http://img5.mtime.cn/mt/2019/12/23/144335.29871179_175X262X4.jpg"),
        XJHomeProductItem("Apple3", "Macbook3",
            "http://img5.mtime.cn/mt/2019/12/27/182450.52538653_175X262X4.jpg"),
      ],
    );
  }
}

// relayoutBoundary 超出布局边界
class XJHomeProductItem extends StatelessWidget {
  final String title;
  final String desc;
  final String imageUrl;
  final style1 = TextStyle(fontSize: 30.0, color: Colors.orange);
  final style2 = TextStyle(fontSize: 20.0, color: Colors.green);
  // Flex
  XJHomeProductItem(this.title, this.desc, this.imageUrl);
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(8),
      margin: EdgeInsets.all(0),
      decoration: BoxDecoration(
        border: Border.all(
          width: 5,
          color: Colors.black12,
        ),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                title,
                style: style1,
              ),
              Text(
                title,
                style: style1,
              ),
              Text(
                title,
                style: style1,
              ),
            ],
          ),
          SizedBox(
            height: 5.0,
          ),
          Text(
            desc,
            style: style2,
          ),
          SizedBox(
            height: 10.0,
          ),
          Image.network(
            imageUrl,
            fit: BoxFit.fill,
          ),
        ],
      ),
    );
  }
}
